<template>
  <div o-Container>
    <div class="content_left_box">
      <!-- <div class="top_box">
        <div class="search_box">
          <img src="/static/skin/herodoo/main/platform/home/img/search.png" alt="">
          <input v-model="form.searchValue" type="text" placeholder="请输入搜索内容" @keydown.enter="searchEnterKeyPress"
            @blur="searchEnterKeyPress">
        </div>

        <el-select class="select" size="medium" v-model="form.typeId" filterable clearable placeholder="请选择合作模式" @change="changeTypeId">
          <el-option v-for="item in selectObj.typeId.options" :key="item.ID" :label="item.Name" :value="item.ID">
          </el-option>
        </el-select>

        <el-select class="select" size="medium" v-model="value" filterable clearable placeholder="请选择上架平台">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>

      </div> -->
      <!--  -->
      <div
        class="button_box"
        v-if="octopus.passport.authorization.company == 1"
      >
        <el-button
          size="small"
          type="primary"
          @click="downLoad()"
          :href="downExcel"
          >导出合同模板</el-button
        >
        <el-upload
          class="upload-demo"
          action="#"
          :show-file-list="false"
          :multiple="false"
          limit="1"
          accept=".xlsx,.xls,.xlsm"
          :before-upload="beforeUpload"
          :with-credentials="true"
          :http-request="httpRequest"
        >
          <el-button size="small" type="primary">导入合同</el-button>
        </el-upload>
      </div>
    </div>

    <o-list v-bind:source="list.contract">
      <template slot="config" slot-scope="scope">
        <div class="img_box">
          <img
            @click="showDialog(scope)"
            src="/static/skin/default/MCS/AIGC/Inventory/images/chakan.png"
            alt=""
          />
          <img
            @click="showEditDialog(scope)"
            src="/static/skin/default/MCS/AIGC/Inventory/images/bianji.png"
            alt=""
          />
          <!-- <img @click="showEditDialog(scope)"
            src="/static/skin/default/MCS/AIGC/Inventory/images/shanchu.png" alt=""> -->
        </div>
      </template>
    </o-list>
    <lookDiaolog ref="lookDialog" :messageList="messageList"></lookDiaolog>
    <editDiaolog
      ref="editDialog"
      :messageList="messageList"
      @reload="reload"
    ></editDiaolog>
    <contractScreen @searchFun="search" ref="contractScreen"></contractScreen>
  </div>
</template>

<script>
import lookDiaolog from "../Components/lookDialog.vue";
import editDiaolog from "../Components/editDialog.vue";
export default {
  name:
    "mms_platform_company_list" /* 这个name暂时不知道用啥用，根据官方文档说的是方便排错的 */,
  components: {
    lookDiaolog,
    editDiaolog
  },
  data() {
    return {
      octopus: this.$parent.octopus,
      list: {
        contract: {
          data: {
            id: 5, // 菜单表的八爪鱼ID
            cellData: [
              { name: "CompanyName" , width: 200, searchKey: "=",filterKey:'='}, // CompanyName
              { name: "CompanyID", show:false }, // 所属企业
              { name: "TypeID", searchKey: "=" }, // 合作模式
              { name: "ContractEquityCount", width: 80 }, // 权益数量
              { name: "Platform", width: 180, searchKey: "like" }, // 上架平台
              { name: "ServiceYears" }, // 合同年限
              { name: "Code", width: 130 }, // 合同号
              { name: "StartTime", width: 130 }, // 合同开始日期
              { name: "EndTime", width: 130 }, // 合同截止时间
              // { name: "CreateUserID" },	// 创建人
              { name: "FilePath", show: false }, // 附件Path
              { name: "ID", show: false }, // ID
              // { name: "Name" },	// 合同名称
              // { name: "Signatory" },	// 签约人
              // { name: "SignTime" },	// 签字时间
              { name: "Status", width: 80 }, // 合作状态
              // { name: "UpdateTime" },	// 合同更新时间
              { name: "CreateTime", width: 150 }, // 上传日期
              { name: "fullName" } // 公司全称
            ],
            paramData: {}
          },
          configWidth: 60,
          showNumber: true
        }
      },
      item: {
        contract: {
          // 以下参数默认由组件内部创建，但是如果有需要，开发人员可在这里提前设置，组件将按照您的预期渲染。
          data: {
            id: 1188,
            value: "",
            cellData: [
              { name: "CompanyID" }, // 公司ID
              { name: "Name" }, // 合同名称
              { name: "Code" }, // 合同号
              { name: "TypeID" }, // 1:权益合作；2:权益+平台租赁；3:权益+开发；
              { name: "ServiceYears" }, // 服务年限（签署时长）
              { name: "Status" }, // 状态（1签署中；2:已签署，3:已到期）
              { name: "Signatory" }, // 签署人
              { name: "SignTime" }, // 合同签订日期
              { name: "StartTime" }, // 合同生效时间
              { name: "EndTime" }, // 合同到期时间
              { name: "FilePath" }, // 合同附件
              { name: "ID", show: false }, // ID
              { name: "UpdateTime" }, // 修改时间
              { name: "CreateTime" }, // 创建时间
              { name: "CreateUserID" } // 创建人
            ]
          }
        }
      },

      messageList: {},
      editList: {},
      downExcel: "",
      form: {
        searchValue: "", // 筛选内容
        typeId: "", //合作模式
        Platform: "" //上架平台
      },
      selectObj: {
        typeId: {
          value: "",
          options: []
        },
        Platform: {
          value: "",
          options: []
        }
      }
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.list.contract.data.paramData = {
        CompanyID:
          this.octopus.passport.authorization.company == 1
            ? "NULL"
            : this.octopus.passport.authorization.company
      };
      this.getType();
    },
    create: function() {
      //弹出创建页面
      this.item.contract.data.value = null;
      this.item.contract.control.load();
      this.panel.visible = true;
    },
    save: function(data) {
      // 保存
      this.octopus.tips.success(data);
      // 刷新list
      this.list.contract.control.load();
      this.back();
    },
    back: function() {
      this.panel.visible = false;
    },
    showDialog(row) {
      this.messageList = row.data.row; // 当前点击的数据
      this.$nextTick(() => {
        this.$refs.lookDialog.drawerOp();
      });
    },
    reload() {
      this.list.contract.control.load();
    },
    showEditDialog(row) {
      this.messageList = row.data.row; // 当前点击的数据
      this.octopus.request.api.post(
        "/Octopus/Engine/List",
        {
          id: 1188,
          cellData: [
            { name: "CompanyID" }, // 公司ID
            { name: "Name" }, // 合同名称
            { name: "Code" }, // 合同号
            { name: "TypeID" }, // 1:权益合作；2:权益+平台租赁；3:权益+开发；
            { name: "ServiceYears" }, // 服务年限（签署时长）
            { name: "Status" }, // 状态（1签署中；2:已签署，3:已到期）
            { name: "Signatory" }, // 签署人
            { name: "SignTime" }, // 合同签订日期
            { name: "StartTime" }, // 合同生效时间
            { name: "EndTime" }, // 合同到期时间
            { name: "FilePath" }, // 合同附件
            { name: "ID", show: false }, // ID
            { name: "UpdateTime" }, // 修改时间
            { name: "CreateTime" }, // 创建时间
            { name: "CreateUserID" } // 创建人
          ]
        },
        data => {
          if (data.status.code == 200) {
            this.editList = data.content.queryData[0];
            this.$nextTick(() => {
              this.key = Math.random();
              this.$refs.editDialog.drawerOp();
            });
          } else {
            this.octopus.tips.error(data);
          }
        }
      );
    },
    beforeUpload(file) {
      if (this.octopus.passport.authorization.company != 1) {
        this.$message.error("没有权限使用上传合同文件功能！");
        return;
      }
      const isExcel = /\.(xlsx|xls|xlsm)$/.test(file.name);
      if (!isExcel) {
        this.$message.error("只能上传Excel文件！");
        return false;
      }
      return true;
    },
    excelUpload: function(file) {},
    httpRequest({ file }) {
      const o = this;
      this.octopus.request.api.upload(
        file,
        () => {},
        res => {
          if (res.status.code == 200) {
            let url = `${this.octopus.config.url}${res.content.url}`;

            // this.octopus.request.api.post(
            //   "/ESB/Services/Tools/Data/Get",
            //   {
            //     requestType: "POST_JSON", // POST_JSON
            //     url: `http://wxzf001.natapp1.cc/ESB/AIGC/ImportExcel?url=${url}`,
            //     params: {
            //       url: url
            //     }
            //   },
            //   datas => {
            //     if (datas.status.code == 200) {
            //       this.$message.success("上传成功。");
            //     } else {
            //       this.octopus.tips.error(datas);
            //     }
            //   }
            // );
            this.octopus.tools.openAPI(
              `/ESB/AIGC/ImportExcel?url=${url}`,
              {},
              data => {
                if (data.status.code == 200) {
                  o.$message.success("上传成功。");
                } else {
                  o.octopus.tips.error(datas);
                }
              }
            );
          } else {
            this.$message.success("文件上传失败，请重新上传。");
          }
        }
      );
      return;
    },
    downLoad() {
      let url = `${
        this.octopus.config.url
      }/api/upload/20240809/F6427B-AC6C4-8ABFC-F66B6-DB31A-9AF3EA`;

      fetch(url)
        .then(response => response.blob())
        .then(blob => {
          const a = document.createElement("a");
          a.href = window.URL.createObjectURL(blob);
          a.download = "合同模板.xlsx";
          document.body.appendChild(a);
          a.click();
          window.URL.revokeObjectURL(a.href);
          document.body.removeChild(a);
        });
    },
    output: data => {
      this.octopus.tips.success("下载完成。");
    },
    search() {},
    getType() {
      this.octopus.request.api.post(
        "/Octopus/Engine/List",
        {
          id: 1191,
          cellData: [
            { name: "ID" }, // ID
            { name: "Name" }, // Name
            { name: "ParentID" } // ParentID
          ]
        },
        data => {
          if (data.status.code == 200) {
            this.selectObj.typeId.options = data.content.queryData;
          } else {
            this.octopus.tips.error(data);
          }
        }
      );
    },
    changeTypeId(e) {
      this.form.typeId = e;
      this.searchEnterKeyPress();
    },
    // 模糊查询
    searchEnterKeyPress() {
      this.octopus.request.api.post(
        "/Octopus/Engine/List",
        {
          id: 5,
          cellData: [
            { name: "CompanyID", width: 200 }, // 所属企业
            { name: "TypeID" }, // 合作模式
            { name: "ContractEquityCount", width: 80 }, // 权益数量
            { name: "Platform", width: 180 }, // 上架平台
            { name: "ServiceYears" }, // 合同年限
            { name: "Code", width: 130 }, // 合同号
            { name: "StartTime", width: 130 }, // 合同开始日期
            { name: "EndTime", width: 130 }, // 合同截止时间
            // { name: "CreateUserID" },	// 创建人
            { name: "FilePath", show: false }, // 附件Path
            { name: "ID", show: false }, // ID
            { name: "Name" }, // 合同名称
            // { name: "Signatory" },	// 签约人
            // { name: "SignTime" },	// 签字时间
            { name: "Status", width: 80 }, // 合作状态
            // { name: "UpdateTime" },	// 合同更新时间
            { name: "CreateTime", width: 150 }, // 上传日期
            { name: "fullName" } // 公司全称
          ],
          paramData: {
            name: this.form.searchValue,
            TypeID: this.form.typeId,
            Platform: this.form.Platform
          }
        },
        data => {
          if (data.status.code == 200) {
          } else {
            this.octopus.tips.error(data);
          }
        }
      );
    }
  },
  props: ["oData"]
};
</script>
<style scoped>
@import "../../../../../static/skin/default/MMS/AIGC/EquityRepositories/PublicLibrary/css/base.css";

.content_left_box {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.top_box {
  justify-content: start;
}

.el-message-box {
  background-color: #fff !important;
}

.img_box {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.img_box img {
  width: 25px;
  cursor: pointer;
}

.import {
  display: flex;
  justify-content: flex-end;
  margin: 1rem;
}

.import >>> .el-button--primary {
  padding: 0.8rem 1.4rem;
  background: #ff860d;
  color: #fff;
  border-radius: 1rem;
  cursor: pointer;
  font-size: 1rem;
  border-color: #ff860d;
  margin: 0 10px;
}

.import >>> .el-button--primary:hover {
  border-color: #ff860d;
}

.select {
  margin: 0 10px;
}

.select >>> .el-input__inner {
  border-radius: 5rem;
  border-color: #f0f0f0;
}

>>> .Content {
  height: 77vh !important;
}
.button_box {
  display: flex;
  flex-direction: row;
}
.button_box button {
  width: 15rem;
  height: 100%;
  border-radius: 4rem;
  border: none;
  color: #fff;
  background-color: #f78c52;
  box-shadow: 0px -3px 4px 0px rgba(204, 190, 186, 0.4);
  font-size: 1.7rem;
  cursor: pointer;
}

.button_box button {
  margin-right: 1.3rem;
}
</style>
